<template>
  <el-main v-loading="open" element-loading-background="rgba(243,244,247,1)">
    <el-card>
      <!-- 搜索框区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input clearable placeholder="请输入订单号查询" prefix-icon="el-icon-search" v-model="pageInfo.qurey" @clear="getOrdersList"> </el-input>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="getOrdersList">查询</el-button>
        </el-col>
      </el-row>

      <!-- 订单表格区域 -->
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="orderId" label="订单号" width="280"> </el-table-column>
        <el-table-column prop="user.name" label="用户" width="150"> </el-table-column>
        <el-table-column label="用户性别" width="50">
          <template slot-scope="scope">
            <span>{{ scope.row.user.sex == 0 ? '男' : '女' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120"> </el-table-column>
        <el-table-column prop="address" label="地址" width="250"> </el-table-column>
        <el-table-column prop="createTime" label="下单时间" width="180"> </el-table-column>
        <el-table-column label="实收金额" width="100">
          <template slot-scope="scope">
            <span>￥{{ scope.row.orderPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span v-if="scope.row.orderStatus == 0">订单未支付</span>
            <el-button type="text" class="edit" @click="editOrders(scope.row, true)" v-if="scope.row.orderStatus == 1">确认出餐</el-button>
            <span v-if="scope.row.orderStatus == 3">订单已完成</span>
            <span v-if="scope.row.orderStatus == 4">订单已取消</span>
            <span v-if="scope.row.orderStatus == 5">订单已退款</span>
            <el-button type="text" class="stop" @click="editOrders(scope.row, false)" v-if="scope.row.orderStatus == 2">确认送达</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <div class="table">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pageNum"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </el-main>
</template>

<script>
export default {
  name: 'MealsOrder',
  data() {
    return {
      open: true,
      tableData: [],
      total: 0,
      pageInfo: {
        //模糊查询的数据
        qurey: '',
        //当前页数
        pageNum: 1,
        //每页显示的数据条数
        pageSize: 10,
      },
      //更改状态的表单
      editFrom: [],
    };
  },

  created() {
    this.openFullScreen();
    this.getOrdersList();
  },

  methods: {
    openFullScreen() {
      this.open = true;
      setTimeout(() => {
        this.open = false;
      }, 1000);
    },
    //获取所有订单信息列表
    async getOrdersList() {
      const { data: res } = await this.$http.get('orders/getOrdersList', {
        params: this.pageInfo,
      });
      if (res.code == 1) {
        this.tableData = res.data.records;
        this.total = res.data.total;
      } else {
        return this.$message.error('信息获取失败');
      }
    },
    handleSizeChange(newSize) {
      this.pageInfo.pageSize = newSize;
      this.getOrdersList();
    },

    handleCurrentChange(newPageNum) {
      this.pageInfo.pageNum = newPageNum;
      this.getOrdersList();
    },
    //更改订单状态
    async editOrders(ordersInfo, editStatus) {
      this.editFrom = ordersInfo;
      if (editStatus) {
        this.editFrom.orderStatus = 2;
      }
      if (!editStatus) {
        this.editFrom.orderStatus = 3;
      }
      const { data: res } = await this.$http.put('orders/updateOrders', this.editFrom);
      if (res.code == 1) {
        this.getOrdersList();
        return this.$message.success(res.data);
      } else {
        return this.$message.error('订单状态更新失败');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 20px;
}
.edit {
  color: #419eff;
  font-size: 13px;
}
.table {
  display: flex;
  justify-content: space-evenly;
  margin-top: 25px;
}
.line {
  color: #ebeef5;
  font-size: 13px;
  margin: 0 5px 0 5px;
}
.stop {
  color: #ffc200;
  font-size: 13px;
}
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand .el-form-item {
  margin-right: 0px;
  margin-bottom: 0;
}
.el-form--label-left .el-form-item__label {
  color: #99a9bf;
  font-weight: bold;
}
.el-main {
  padding: 0px;
}
</style>